@mixin enter-transform($placement, $animation) {
    @if ($animation == 'fade') {
        @if ($placement == 'top') {
            transform: translateY(-10px);
        } @else if ($placement == 'bottom') {
            transform: translateY(10px);
        } @else if ($placement == 'left') {
            transform: translateX(-10px);
        } @else if ($placement == 'right') {
            transform: translateX(10px);
        }
    } @else if ($animation == 'scale') {
        @if ($placement == 'top') {
            transform: translateY(-10px) scale(1);
        } @else if ($placement == 'bottom') {
            transform: translateY(10px) scale(1);
        } @else if ($placement == 'left') {
            transform: translateX(-10px) scale(1);
        } @else if ($placement == 'right') {
            transform: translateX(10px) scale(1);
        }
    }
}

@mixin leave-transform($placement, $animation) {
    @if ($animation == 'shift-away') {
        @if ($placement == 'top') {
            transform: translateY(0);
        } @else if ($placement == 'bottom') {
            transform: translateY(0);
        } @else if ($placement == 'left') {
            transform: translateX(0);
        } @else if ($placement == 'right') {
            transform: translateX(0);
        }
    } @else if ($animation == 'scale') {
        @if ($placement == 'top') {
            transform: translateY(-10px) scale(0.5);
        } @else if ($placement == 'bottom') {
            transform: translateY(10px) scale(0.5);
        } @else if ($placement == 'left') {
            transform: translateX(-10px) scale(0.5);
        } @else if ($placement == 'right') {
            transform: translateX(10px) scale(0.5);
        }
    }
}

@mixin backdrop-transform-enter($placement) {
    $scale: 1;
    @if ($placement == 'top') {
        transform: scale($scale) translate(-50%, -55%);
    } @else if ($placement == 'bottom') {
        transform: scale($scale) translate(-50%, -45%);
    } @else if ($placement == 'left') {
        transform: scale($scale) translate(-50%, -50%);
    } @else if ($placement == 'right') {
        transform: scale($scale) translate(-50%, -50%);
    }
}

@mixin backdrop-transform-leave($placement) {
    $scale: 0.2;
    @if ($placement == 'top') {
        transform: scale($scale) translate(-50%, -45%);
    } @else if ($placement == 'bottom') {
        transform: scale($scale) translate(-50%, 0);
    } @else if ($placement == 'left') {
        transform: scale($scale) translate(-75%, -50%);
    } @else if ($placement == 'right') {
        transform: scale($scale) translate(-25%, -50%);
    }
}
